import React, {useEffect, useState} from 'react';
import {Layout, Menu, Input, Button, QRCode, Card, Row, Col, Avatar, Image, Space, Tag, } from 'antd';
import "./index.less"
import Sider from "antd/es/layout/Sider";
import Paragraph from "antd/es/skeleton/Paragraph";
import {EditOutlined, EllipsisOutlined, SearchOutlined, SettingOutlined} from "@ant-design/icons";
import Meta from "antd/es/card/Meta";
import Search from "antd/es/input/Search";
import type { GetProps } from 'antd';
import Article from "@/components/Article/Article";
import ArticlesList from "@/components/Article/Article";
import {getHotTagList, ResumeTagType} from "@/api/tag";
import {getArticleListByTagList, ResumeArticleType} from "@/api/article";

type SearchProps = GetProps<typeof Input.Search>;
const { Header } = Layout;

const PassagePage: React.FC = () => {

    const [loading, setLoading] = useState(true)
    const [hotTagList, setHotTagList] =useState<ResumeTagType[]>([]);
    const [articleList, setArticleList] =useState<ResumeArticleType[]>([]);

    const loadHotTagList = () => {
        getHotTagList()
            .then(res => {
                setLoading(true);
                const unwrap = res.data;
                console.log(unwrap);
                setHotTagList(res.data.map((item, index) => {
                    return {
                        key: index,
                        ...item
                    }
                }));
                setLoading(false)
            })
            .catch(err => {
                setLoading(false)
            })
    }
    const loadArticleListByTagList = (tagList: any[]) => {
        getArticleListByTagList({tagList:tagList})
            .then(res => {
                setLoading(true);
                const unwrap = res.data;
                console.log(unwrap);
                setArticleList(res.data.map((item, index) => {
                    return {
                        key: index,
                        ...item
                    }
                }));
                setLoading(false)
            })
            .catch(err => {
                setLoading(false)
            })
    }
    useEffect(() => {
        loadHotTagList();

    }, []);

    const onMenuItemClick = (e: any) => {
        const tagId = e.key;
        console.log(`Menu item clicked: ${tagId}`);
        const clickedTag = hotTagList.find(tag => tag.id.toString() === tagId);
        if (clickedTag) {
            console.log(`Menu item clicked: ${clickedTag.name} (ID: ${tagId})`);
            const tagList=[];
            tagList.push(clickedTag.name);
            loadArticleListByTagList(tagList);
            // 这里你可以直接使用 clickedTag 对象
            // 例如，你可以根据 tagId 或 tagName 执行更多的操作
        }

        // 你可以在这里根据 tagId 执行更多的操作，例如获取更多关于该标签的信息
    };
    const customInputStyle = {

        whiteSpace: 'nowrap',
        marginTop:16,
        backgroundColor: '#f6f6f6', // 灰色底色
        borderRadius: 30, // 边框圆角
        border: '1px solid #d9d9d9', // 边框样式，可选
    };
    const articles = [
        {
            id: 1,
            title: '求职必读!保姆级高分简历撰写指南',
            tags: ['推荐', '简历', '校招'],
            summary: '简历是一个人求职的门面，也是整个求职过程中的第一步。然而HR阅读每份简历的平均时间只有十几秒，甚至更短。如何在这黄金数秒的时间里脱颖而出，让HR为你多停留一会，发起面试邀请...',
            date: '2024-06-12 14:53',
            cover: 'https://pic.code-nav.cn/laoyujianli/post_cover/1767831191857635329/BCRNysKA-anne-nygard-KAx_Ok89I7Q-unsplash (2).jpg',
        },
        {
            id: 2,
            title: '求职必读!保姆级高分简历撰写指南',
            tags: ['推荐', '简历', '校招'],
            summary: '简历是一个人求职的门面，也是整个求职过程中的第一步。然而HR阅读每份简历的平均时间只有十几秒，甚至更短。如何在这黄金数秒的时间里脱颖而出，让HR为你多停留一会，发起面试邀请...',
            date: '2024-06-12 14:53',
            cover: 'https://pic.code-nav.cn/laoyujianli/post_cover/1767831191857635329/BCRNysKA-anne-nygard-KAx_Ok89I7Q-unsplash (2).jpg',
        },
        // 更多文章...
    ];
    const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
    return (

        <div  className="laoyu-page-container">
            <Space className="header-wrapper" direction="vertical">
                <Header className="header ">
                    <Menu mode="horizontal" defaultSelectedKeys={['1']} onClick={onMenuItemClick}>
                        {hotTagList.map((tag) => (
                            <Menu.Item key={tag.id.toString()}>{tag.name}</Menu.Item>
                        ))}
                    </Menu>
                    <div className="search-input">
                        <Input
                            size="middle"
                            style={customInputStyle}
                            suffix={<SearchOutlined />}
                            onSearch={value => console.log(value)} // 保留onSearch来处理搜索
                            // 移除额外的搜索按钮
                        />
                    </div>
                </Header>
                <div className="article-wrapper">
                    <ArticlesList articles={articleList} />
                </div>
            </Space>
            <div className="qrcode-wrapper" >
                <div className="qrcode-meta">
                    <Image className="qrcode-avatar"
                        src="https://pic.code-nav.cn/laoyujianli/post_cover/1767831191857635329/BCRNysKA-anne-nygard-KAx_Ok89I7Q-unsplash (2).jpg"
                    />
                    <Card style={{boxShadow:"none"}} bordered={false} hoverable={false} className="qrcode-detail">
                        <Meta
                            title="老鱼简历公众号"
                            description="获取更多求职技巧、简历技巧、职场经验、最新动态"
                        />
                    </Card>
                </div>
                <Space direction="vertical"  className="qrcode-template">
                    <Card className="qrcode-recommend" title="精选模板" extra={<a href="#">更多模板&gt;&gt;</a>} >
                        <div className="qrcode-recommend-list">
                            {articleList.map((article, index) => (
                                <Card className="qrcode-recommend-item"
                                    cover={
                                        <Image
                                            className="qrcode-recommend-item-img"
                                            alt="example"
                                            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                                        />
                                    }
                                >
                                    <Meta
                                        title="Card title"
                                        description={article.tagList.map((tag, index) => (
                                            <Tag key={index} color="blue">{tag}</Tag>
                                        ))}
                                    />
                                </Card>
                            ))}
                        </div>

                    </Card>
                </Space>

            </div>

            {/* 其他页面内容 */}
        </div>
      );
};

export default PassagePage;
